﻿/*Animation for page switching===========================================================================*/
.page-hidden {
    top: 110%;
}

@-webkit-keyframes anim-page-slideAway {
    0% {
        -webkit-transform: translate3d(0,0%,0);
    }

    100% {
        -webkit-transform: translate3d(110%,0,0);
    }
}

@-webkit-keyframes anim-page-slideIn {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
    }

    100% {
        -webkit-transform: translate3d(0,0,0);
    }
}

@keyframes anim-page-slideAway {
    0% {
        transform: translate3d(0,0%,0);
    }

    100% {
        transform: translate3d(110%,0,0);
    }
}

@keyframes anim-page-slideIn {
    0% {
        transform: translate3d(-100%,0,0);
    }

    100% {
        transform: translate3d(0,0,0);
    }
}

.page-slideAway {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-animation: anim-page-slideAway 0.5s ease-in;
    -webkit-animation-fill-mode: forwards;
    backface-visibility: hidden;
    perspective: 1000;
    animation: anim-page-slideAway 0.5s ease-in;
    animation-fill-mode: forwards;
}

.page-slideIn {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-animation: anim-page-slideIn 0.5s ease-out;
    -webkit-animation-fill-mode: backwards;
    backface-visibility: hidden;
    perspective: 1000;
    animation: anim-page-slideIn 0.5s ease-out;
    animation-fill-mode: backwards;
}

/*Fade-in, fade out for text binding (Commentend in utils.ts)===================================================================*/

@-webkit-keyframes anim-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes anim-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes anim-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes anim-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-out {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-animation: anim-fade-out 0.5s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation: anim-fade-out 0.5s ease-out;
    animation-fill-mode: forwards;
}

.fade-in {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-animation: anim-fade-in 0.5s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation: anim-fade-in 0.5s ease-out;
    animation-fill-mode: forwards;
}

/*Transition for show/hide panel====================*/
.hideSlidingPanel {
    -webkit-transition: -webkit-transform 0.5s linear;
    -webkit-transform: translateY(-100%) translateZ(0);
    transition: 0.5s linear;
    transform: translateY(-100%) translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
}

.showSlidingPanel {
    -webkit-transition: -webkit-transform 0.5s linear;
    -webkit-transform: translateY(+100%) translateZ(0);
    transition: 0.5s linear;
    transform: translateY(+100%) translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
}
/*Animations for windows Opening===========================================*/
@-webkit-keyframes anim-window-show {
    0% {
        -webkit-transform: scale3d(0,0,1);
    }

    70% {
        -webkit-transform: scale3d(1.2,1.2,1);
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
    }
}

@keyframes anim-window-show {
    0% {
        transform: scale3d(0,0,1);
    }

    70% {
        transform: scale3d(1.2,1,2);
    }

    100% {
        transform: scale3d(1,1,1);
    }
}
/*=========================================================================*/
/*Commented - Android 4.1 problems*/
.showWindow {
    /*-webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;

    -webkit-animation: anim-window-show 0.7s;
    animation: anim-window-show 0.7s;*/
}

.closeWindow {
}
/*=============STATus BAR    =====================================*/
@-webkit-keyframes anim-status-down {
    100% {
        height: 65px;
        font-size: 65px;
    }
}

@keyframes anim-status-down {
    100% {
        height: 65px;
        font-size: 65px;
    }
}

@-webkit-keyframes anim-status-up {
    0% {
        font-size: 65px;
        height: 65px;
    }

    100% {
        height: 20px;
        font-size: 16px;
    }
}

@keyframes anim-status-up {
    0% {
        font-size: 65px;
        height: 65px;
    }

    100% {
        height: 20px;
        font-size: 16px;
    }
}

.status-bar-down {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-animation: anim-status-down 0.7s;
    animation: anim-status-down 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.status-bar-up {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-animation: anim-status-up 0.7s;
    animation: anim-status-up 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.font-16px {
    font-size:16px !important;
}